<template>
  <el-container class="setting-center_mall-shop-setting">
    <el-button class="fixedRight" type="primary" icon="el-icon-sort" size="small" @click="$showHide()" />
    <el-main>
      <div class="card-list">
        <el-card shadow="never" class="selectCard searchColumn">
          <el-form label-position="right" label-width="6rem">
            <el-row :gutter="40">
              <el-col :span="8">
                <el-form-item label="楼栋">
                  <el-select v-model="params.name" placeholder="楼栋">
                    <el-option label="全部" value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="楼层">
                  <el-select v-model="params.name" placeholder="楼层">
                    <el-option label="全部" value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="经营模式">
                  <el-select v-model="params.name" placeholder="经营模式">
                    <el-option label="全部" value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="业态">
                  <el-select v-model="params.name" placeholder="业态">
                    <el-option label="全部" value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商户名称">
                  <el-input v-model="params.name" />
                </el-form-item>
              </el-col>
            </el-row>
            <SearchButton :default-params="params" @refreshParams="refreshParams" @getList="getList" />
          </el-form>
        </el-card>
        <el-card shadow="never" class="tableCard">
          <vxe-toolbar :custom="{icon: 'el-icon-s-operation'}" :refresh="{query: getList}" print>
            <template v-slot:buttons>
              <el-button type="warning" icon="el-icon-connection">批量初始化</el-button>
            </template>
            <!-- <template v-slot:tools>1</template> -->
          </vxe-toolbar>
          <vxe-table
            ref="xTable"
            border
            resizable
            row-id="id"
            highlight-hover-row
            :auto-resize="true"
            :data="tableData"
            width
            max-height="500"
            :print-config="{}"
            :checkbox-config="{checkRowKeys: checkList, checkStrictly: false, checkMethod: checCheckboxkMethod}"
            @checkbox-all="selectAll"
            @checkbox-change="selectChangeEvent"
          >
            <vxe-table-column type="checkbox" width="35" />
            <vxe-table-column field="name" align="center" title="楼栋" />
            <vxe-table-column field="name" align="center" title="楼层" />
            <vxe-table-column field="name" align="center" title="商户名称" />
            <vxe-table-column field="name" align="center" title="品牌logo" />
            <vxe-table-column field="name" align="center" title="品牌名称" />
            <vxe-table-column field="name" align="center" title="铺位号" />
            <vxe-table-column field="name" align="center" title="经营模式" />
            <vxe-table-column field="name" align="center" title="业态" />
            <vxe-table-column field="name" align="center" title="状态" />
            <vxe-table-column title="操作" fixed="right" align="center" width="180" slots="default">
              <template slot-scope="scope">
                <el-button type="text" size="mini" icon="el-icon-chat-line-round" @click="getList(scope.row.name)">初始化</el-button>
              </template>
            </vxe-table-column>
          </vxe-table>
          <vxe-pager
            :current-page.sync="tableCurrentPage"
            :page-size.sync="pageSize"
            :total="total"
            :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
            @page-change="getRentList()"
          />
        </el-card>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import SearchButton from '@/components/SearchButton'
export default {
  components: {
    SearchButton
  },
  data() {
    return {
      options: [],
      checkList: [],
      rules: {
        name: [
          { required: true, message: '请填写详细地址', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '请选择所在城市', trigger: 'blur' }
        ]
      },
      title: '蜂网电子商务',
      params: {
        name: '0'
      },
      tableData: [
        {
          name: '111',
          id: 1
        }
      ],
      tableCurrentPage: 1,
      pageSize: 20,
      total: 0
    }
  },
  mounted() {
  },
  methods: {
    refreshParams(params) {
      this.params = params
    },
    getList() {},
    checCheckboxkMethod({ row }) {
      return true
    },
    selectAll(e) {
      if (e.checked) {
        this.checkList.push(...e.records.map(item => item.id))
        this.checkList = Array.from(new Set(this.checkList))
      } else {
        const arr = []
        const arr1 = []
        this.tableData.forEach(item => {
          if (item.status === 0) {
            arr.push(item.id)
          }
        })
        this.checkList.forEach((item, index) => {
          arr.forEach(it => {
            if (item === it) {
              arr1.push(index)
            }
          })
        })
        arr1.reverse().forEach(item => {
          this.checkList.splice(item, 1)
        })
      }
    },
    selectChangeEvent(row) {
      let i = -1
      this.checkList.forEach((item, index) => {
        if (item === row.row.id) {
          i = index
        }
      })
      if (i === -1) {
        this.checkList.push(row.row.id)
      } else {
        this.checkList.splice(i, 1)
      }
    }
  }
}
</script>

<style lang="scss">
.setting-center_mall-shop-setting {
  .card-list {
    width: 100%;
  }
}
</style>
